<template>
    <!-- 头部 -->
    <el-affix :offset="0">
        <div class="bodybox">
            <div class="container">
                <div class="logo">
                    <span class="icomoon">
                        <el-icon>
                            <DArrowLeft />
                        </el-icon>
                        返回首页
                    </span>
                    <img src="img/logo.png">
                    <span class="icomoon">
                        个人中心
                        <el-icon>
                            <DArrowRight />
                        </el-icon>
                    </span>
                </div>
            </div>
            <!-- top导航栏 -->
            <div class="topbigbox">
                <div class="container">
                    <el-menu :default-active="activeIndex" class="el-menu-demo topbox" mode="horizontal"
                        :ellipsis="false">
                        <el-menu-item index="1" @click="router.replace({ path: '/index' })">简介</el-menu-item>
                        <el-menu-item index="2" @click="router.replace({ path: '/reserve' })">预订</el-menu-item>
                        <el-menu-item index="3">通知</el-menu-item>
                        <span class="toplogotext">—— Huadao Resort ——</span>
                        <el-menu-item index="4">客服</el-menu-item>
                        <el-menu-item index="5">关于</el-menu-item>
                        <el-menu-item index="6">地址</el-menu-item>
                    </el-menu>
                </div>
            </div>
        </div>
    </el-affix>
    <router-view></router-view>


</template>
<script setup>
import { ref } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const router = useRouter();

const activeIndex = ref('1')

</script>
<style lang="scss">
.container {
    width: 1200px;
    margin: 0 auto;
}

/* 头部 */
.el-affix {
    top: 5px;
    width: 100%;
    height: 140px;

    .bodybox {
        background-color: #fff;

        // overflow: hidden;
        .logo {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-between;

            img {
                margin-top: 0;
                height: 75px;
            }

            span {
                color: #000000;
                font-size: 30px;
                width: 33%;
                text-align: center;
                font-weight: 800;
                line-height: 80px;
            }

            :hover {
                border-bottom: 5px solid #080808;
            }
        }

        .topbigbox {
            border-top: 2px solid #080808;
            box-shadow: 3px 3px 3px #666;

            .topbox {
                display: flex;
                justify-content: center;

                .toplogotext {
                    font-size: 25px;
                    line-height: 55px;
                    margin: 0 15px;
                    font-weight: 700;
                    text-shadow: 1px 1px 1px #999;
                }

                .el-menu-item {
                    width: 100px;
                    font-weight: 700;
                    font-size: 19px;
                    margin: 0 15px;
                }

                .is-active {
                    font-size: 24px;
                }
            }
        }
    }
}
</style>